<template>

  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">日志管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>日志列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-row class="search_row">
            <el-col :span="6" class="search_title">
              <div>类型</div>
            </el-col>
            <el-col :span="18" class="scroll_input">
              <el-select v-model="logInfo.queryBean.logType" size="mini" clearable placeholder="请选择">
                <el-option label="添加" :value="1"></el-option>
                <el-option label="编辑" :value="2"></el-option>
                <el-option label="删除" :value="3"></el-option>
                <el-option label="导入" :value="4"></el-option>
                <el-option label="导出" :value="5"></el-option>
                <el-option label="用户角色变更" :value="6"></el-option>
                <el-option label="角色权限变" :value="7"></el-option>
                <el-option label="异常" :value="8"></el-option>
                <el-option label="登录" :value="9"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row class="search_row">
            <el-col :span="6" class="search_title">
              <div>类型</div>
            </el-col>
            <el-col :span="18" class="scroll_input">
              <el-select v-model="logInfo.queryBean.logType" size="mini" clearable placeholder="请选择">
                <el-option label="添加" :value="1"></el-option>
                <el-option label="编辑" :value="2"></el-option>
                <el-option label="删除" :value="3"></el-option>
                <el-option label="导入" :value="4"></el-option>
                <el-option label="导出" :value="5"></el-option>
                <el-option label="用户角色变更" :value="6"></el-option>
                <el-option label="角色权限变" :value="7"></el-option>
                <el-option label="异常" :value="8"></el-option>
                <el-option label="登录" :value="9"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 数据 -->
      <el-table :data="logList" stripe size='mini'
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{background:'rgb(17,23,57)','text-align':'center'}">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="logType" label="类型" width="100">
          <template slot-scope="scope">
            　　　　　　　　　　<span v-if="scope.row.logType=== 1">添加</span>
            　　　　　　　　　　<span v-if="scope.row.logType=== 2">编辑</span>
            　　　　　　　　　　<span v-if="scope.row.logType=== 3" style="color: red">删除</span>
            　　　　　　　　　　<span v-if="scope.row.logType=== 4">导入</span>
            　　　　　　　　　　<span v-if="scope.row.logType=== 5">导出</span>
            　　　　　　　　　　<span v-if="scope.row.logType=== 6">用户角色变更</span>
            　　　　　　　　　　<span v-if="scope.row.logType=== 7">角色权限变更</span>
            　　　　　　　　　　<span v-if="scope.row.logType=== 8"style="color: red">异常</span>
            　　　　　　　　　　<span v-if="scope.row.logType=== 9">登录</span>
            　　　　　　　　</template>
        </el-table-column>
        <el-table-column prop="operatorName" label="操作人" width="100"></el-table-column>
        <el-table-column prop="ip" label="ip" width="200"></el-table-column>
        <el-table-column prop="createtime" label="操作时间" width="200"></el-table-column>
        <el-table-column prop="logContent" show-overflow-tooltip label="日志详情"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 分配角色 -->
            <el-tooltip
                class="item"
                effect="dark"
                content="详情"
                placement="top-start"
                :enterable="false"
            >
              <el-button type="warning" icon="el-icon-setting" size="mini"
                         @click="seeDetails(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[5,10, 20, 30, 40]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
      ></el-pagination>
    </el-card>
  </div>

</template>

<script>
import {
  queryLogPage
} from '../../api/LogApi'

export default {
  name: "logList",
  data() {
    return {
      logList: [],
      logInfo: {
        queryBean:{},
        page: {
          current: 1,
          size: 10
        }
      },
      page: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  created() {
    this.queryPage()
  },
  methods: {
    seeDetails(id) {
      // this.$router.path("/")
      this.$router.push({path:'/logDetail',query: { logId: id }})
    },
    handleSizeChange(newSize) {
      this.logInfo.page.size = newSize
      this.queryPage()
    },
    handleCurrentChange(newCurrent) {
      this.logInfo.page.current = newCurrent
      this.queryPage()
    },
    queryPage() {
      queryLogPage(this.logInfo).then(res => {
       //if (res.code != 20000) this.$message.error(res.message)
        this.logList = res.data.list.records
        this.page.total = res.data.list.total
        this.page.current = res.data.list.current
        this.page.size = res.data.list.size
      })
    }
  }
}
</script>

<style lang="less" scoped>
.search_row {
  padding: 10px;

  .search_title {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    margin-bottom: 20px;
  }

  .scroll_input {
    height: 30px;
  }
}
</style>

